/*
 * @Description: 权限指令，用于组件权限的细粒度控制
 * @Author: DHL
 * @Date: 2021-12-22 21:03:29
 * @LastEditors: DHL
 * @LastEditTime: 2023-01-30 17:14:06
 */

import type { App, Directive, DirectiveBinding } from 'vue'
import usePermission from '@/hooks/web/permission'

const authDirective: Directive = {
  mounted: (el: Element, binding: DirectiveBinding<any>) => {
    const { hasPermission } = usePermission()

    const value = binding.value
    if (!value) return

    if (!hasPermission(value)) {
      el.parentNode?.removeChild(el)
    }
  }
}

export function setupPermissionDirective(app: App<Element>) {
  app.directive('auth', authDirective)
}
